<!--
 * @Descripttion: 溯源码-首页
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-04-17
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-04-18
-->
<template>
  <div class="code-index">
    <div class="code-header">总览</div>
    <a-row :gutter="16">
      <a-col :span="6" v-for="item in settingList" :key="item.theme">
        <div class="chat-box" :class="'chat-' + item.theme">
          <div class="chat-title">
            <span class="title-left" @click="pageRedirect(item.link)"> {{ item.title }} <right-outlined :style="{ 'font-size': '14px' }" /></span>
          </div>
          <div class="chat-content">
            <div class="chat-info">
              <a-statistic :value="chatData[item.key].todayCount" v-if="chatData[item.key].todayCount !== null" />
              <span v-else></span>
              <div class="info-detail"
                >较昨日<span class="trend-number" :style="{ color: chatData[item.key].trendCount < 0 ? '#08979C' : '#FF4C3C' }">{{ chatData[item.key].trendCount && chatData[item.key].trendCount < 0 ? Math.abs(chatData[item.key].trendCount) : chatData[item.key].trendCount }}</span
                ><div :class="[`info-icon`, chatData[item.key].trendCount > 0 ? 'info-icon-up' : chatData[item.key].trendCount < 0 ? 'info-icon-down' : '']"></div
              ></div>
            </div>
            <div class="chat-draw" :class="'chat-draw-' + item.theme"></div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { RightOutlined } from '@ant-design/icons-vue'
  import { onMounted, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestGetBatchCount, requestGetChannelCount, requestGetCodeCount, requestGetReportCount } from '/@/api/business/tracecode/homepage'
  import { isNullAndUnDef } from '/@/utils/is'

  const router = useRouter()

  const settingList = ref([
    {
      title: '批次数量',
      theme: 'blue',
      key: 'batchCount',
      link: '/code/batchManage/list',
    },
    {
      title: '码总数',
      theme: 'skyblue',
      key: 'codeCount',
      link: '/channel/viewCode',
    },
    {
      title: '报告总数',
      theme: 'green',
      key: 'reportCount',
      link: '/report/viewReport',
    },
    {
      title: '渠道数量',
      theme: 'purple',
      key: 'channelCount',
      link: '/channel/channelManage/list',
    },
  ])

  /**
   * 路由跳转
   */
  const pageRedirect = (path) => {
    router.replace({
      path,
    })
  }

  const chatData = reactive<any>({
    channelCount: {
      todayCount: null,
      trendCount: null,
    },
    reportCount: {
      todayCount: null,
      trendCount: null,
    },
    codeCount: {
      todayCount: null,
      trendCount: null,
    },
    batchCount: {
      todayCount: null,
      trendCount: null,
    },
  })

  const initData = () => {
    Promise.all([requestGetChannelCount({}), requestGetReportCount({}), requestGetCodeCount({}), requestGetBatchCount({})]).then(([channelCount, reportCount, codeCount, batchCount]) => {
      if (!isNullAndUnDef(channelCount.responseData?.todayCount) && !isNullAndUnDef(channelCount.responseData?.lastDayCount)) {
        chatData.channelCount.todayCount = channelCount.responseData?.todayCount
        chatData.channelCount.trendCount = channelCount.responseData?.todayCount - channelCount.responseData.lastDayCount
      }
      console.log(reportCount.responseData)
      if (!isNullAndUnDef(reportCount.responseData?.todayCount) && !isNullAndUnDef(reportCount.responseData?.lastDayCount)) {
        chatData.reportCount.todayCount = reportCount.responseData?.todayCount
        chatData.reportCount.trendCount = reportCount.responseData?.todayCount - reportCount.responseData.lastDayCount
      }
      if (!isNullAndUnDef(codeCount.responseData?.todayCount) && !isNullAndUnDef(codeCount.responseData?.lastDayCount)) {
        chatData.codeCount.todayCount = codeCount.responseData?.todayCount
        chatData.codeCount.trendCount = codeCount.responseData?.todayCount - codeCount.responseData.lastDayCount
      }
      if (!isNullAndUnDef(batchCount.responseData?.todayCount) && !isNullAndUnDef(batchCount.responseData?.lastDayCount)) {
        chatData.batchCount.todayCount = batchCount.responseData?.todayCount
        chatData.batchCount.trendCount = batchCount.responseData?.todayCount - batchCount.responseData.lastDayCount
      }
    })
  }

  onMounted(() => {
    initData()
  })
</script>

<style lang="less" scoped>
  .code-index {
    height: auto;
    background: #fff;
    padding: 20px;

    .code-header {
      font-weight: 500;
      color: black;
      opacity: 0.85;
      font-size: 16px;
      padding-bottom: 16px;
    }

    .chat-box {
      padding: 16px 20px;
      border-radius: 4px;

      .chat-title {
        font-weight: 400;
        color: #000;

        .title-left {
          cursor: pointer;
        }
      }

      .chat-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .chat-info {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          .chat-number {
            font-size: 26px;
            color: #1d2129;
            line-height: 34px;
          }

          .info-detail {
            font-weight: 400;
            color: #4e5969;
            font-size: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;

            .trend-number {
              font-size: 14px;
              font-weight: 500;
              color: #ff4c3c;
              padding: 0 4px 0 8px;
            }

            .info-icon {
              height: 12px;
              width: 12px;
            }

            .info-icon-up {
              background: url('/@/assets/images/views/code/code-line-up.png') no-repeat;
            }

            .info-icon-down {
              background: url('/@/assets/images/views/code/code-line-down.png') no-repeat;
            }
          }
        }

        .chat-draw {
          width: 138px;
          height: 80px;
        }

        .chat-draw-blue {
          background: url('/@/assets/images/views/code/code-line1.png') no-repeat;
        }

        .chat-draw-skyblue {
          background: url('/@/assets/images/views/code/code-line2.png') no-repeat;
        }

        .chat-draw-green {
          background: url('/@/assets/images/views/code/code-line3.png') no-repeat;
        }

        .chat-draw-purple {
          background: url('/@/assets/images/views/code/code-line4.png') no-repeat;
        }
      }
    }

    .chat-blue {
      background: linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%);
    }

    .chat-skyblue {
      background: linear-gradient(180deg, #f2fefc 0%, #e6fefa 100%);
    }

    .chat-green {
      background: linear-gradient(180deg, #f5fef2 0%, #e6feee 100%);
    }

    .chat-purple {
      background: linear-gradient(180deg, #f6f7ff 0%, #ececff 100%);
    }
  }
</style>
